<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<style type="text/css">
			table{
				border: none;
			}
			tr{
				
				border: none;
			}
			th{
				background-color:#BFBFBF;
				padding: 5px 10px;
			}
			.even{
				background: #fff38f;
			}
			.odd{
				background: #ffffee;
			}
			.selected{
				background-color: #ff6500;
			}
		</style>
	</head>
	<body>
		<table border="" cellspacing="" cellpadding="">
			<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
			<tr><td>小米</td><td>男</td><td>昆明</td></tr>
			<tr><td>小黑</td><td>男</td><td>昆明</td></tr>
			<tr><td>小红</td><td>女</td><td>昆明</td></tr>
			<tr><td>小坤</td><td>男</td><td>昆明</td></tr>
		</table>
		
	</body>
	
	<script type="text/javascript">
		$('tr:odd').addClass('odd')
		$('tr:even').addClass('even')
		$('tr').hover(function(){
			$(this).addClass('selected')
		},function(){
			$(this).removeClass('selected')
		})

        $('#filter').keyup(function(){
			$('table tr').hide()
			.filter(":contains('"+($(this).val())+"')")
			.show()
		})
	</script>
</html>
